Example
আপনার নিজস্ব Vue সার্ভার পান
তথ্য সংগ্রহ সম্পূর্ণ না হওয়া পর্যন্ত বিষয়বস্তু লুকানোর জন্য এটি ভি-ক্লোক ব্যবহার করে।
<div id="app" v-cloak>
{{ message }}
</div>নীচে আরো উদাহরণ দেখুন.
Definition and Usage
তথ্য সংগ্রহ সম্পূর্ণ না হওয়া পর্যন্ত বিষয়বস্তু লুকানোর জন্য ভি-ক্লোক নির্দেশিকা ব্যবহার করা হয়।
সাধারণভাবে, ভি-ক্লোক ব্যবহারকারীকে পৃষ্ঠাটি লোড করার সময় কোঁকড়া বন্ধনী সহ মোড়ানো বিষয়বস্তু দেখতে বাধা দেয়।
প্যাকেজবিহীন সামগ্রী লুকানোর জন্য, উপাদানটিকে ভি-ক্লোক দিয়ে চিহ্নিত করা হয় এবং প্যাকেজ সম্পূর্ণ না হওয়া পর্যন্ত এই সামগ্রীটি লুকানোর জন্য CSS নিয়মগুলি সংজ্ঞায়িত করা হয়৷
ভি-ক্লোক নির্দেশিকা শুধুমাত্র Vue কোডের জন্য কাজ করে যা একটি ওয়েব ব্রাউজারে কম্পাইল করা হয়, তাই SFC (*.vue) ফাইলগুলির সাথে কাজ করার সময় উপযোগী নয়।
More Examples
Example 1
ভি-ক্লোক তথ্য সেটের শেষ না হওয়া পর্যন্ত লাল টেক্সট প্রদর্শনের জন্য ভি-ক্লোক ব্যবহার করে যাতে তথ্য সেটের আগের পর্বটি স্পষ্টভাবে দেখা যায়।
<!DOCTYPE html>
<html>
<head>
<title>Vue v-cloak Directive</title>
<style>
[v-cloak] {
color: red;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Vue v-cloak Example</h1>
<p>The v-cloak directive is used to make the text red until the compilation is complete. Refresh the page, or click the "Run" button, to see the pre-compilation phase better.</p>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>Example 2
JavaScript setTimeout() ফাংশন ব্যবহার করে তথ্য সংগ্রহকে এক সেকেন্ড বিলম্বিত করে, যা ভি-ক্লোকের প্রভাবকে আরও স্পষ্ট করে তোলে।
<!DOCTYPE html>
<html>
<head>
<title>Vue v-cloak Directive</title>
<style>
[v-cloak] {
opacity: 0.5;
}
#app {
padding: 10px;
font-size: x-large;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>Vue v-cloak Example</h1>
<p>Using the JavaScript setTimeout function to delay the Vue compilation to make the pre-compilation phase even more clear.</p>
<div id="app" v-cloak>
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
}, 1000);
</script>
</body>
</html>Exercise
প্রশিক্ষণ:
Vue.js v-cloak directive ?